<template>
	<div id="app">
		<!-- <div id="root">
			<div class="todo-container">
				<div class="todo-wrap">
					<myHeader :receives="receives"></myHeader>
					<myList :todos="todos" :checkTodo="checkTodo"></myList>
					<myFooter></myFooter>
				</div>
			</div>
		</div> -->
		<!-- <router-view /> -->
		<!-- 
			第一种写法
			给实例对象vc绑定实例对象
			通过父组件给子组件绑定一个自定义事件实现:子组件给父组件传递数据
		 -->
		<!-- <student v-on:atguigu='getStudentName'></student> -->

		<!-- 
			第二种写法 通过ref 绑定数据 灵活性强
		 -->
		 <student ref = 'student' @demo="demo"></student> 

		<!-- 

			通过父组件给子组件传递函数类型的props实现, 子给父传递函数
		 -->
		<school :getSchoolName="getSchoolName"></school>
	</div>
</template>

<script>
/* 	import myHeader from './components/MyHeader.vue';
	import myFooter from './components/MyFooter.vue';
	import myList from "./components/MyList.vue"; */
	import student from './components/student.vue';
	import school from './components/school.vue';
	export default {
		name: "App",
		components: {
			student,
			school
			//myFooter,
			/**
			 * 俩个兄弟元素之间传值
			 */
			//myHeader,
			//myList
		
		},
		mounted() {
			//this.$refs.student.$on('atguigu',this.getStudentName);
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件,收到数据',data)
			});
		},
		methods:{
			getSchoolName(name){
				console.log("app收到学校名",name);
			},
			getStudentName(name){ 
				console.log("demo 被调用了",name)
			},
			demo(){
				console.log('我运行了');
			}
		}
		/* data() {
			return {
				todos: [
					{id: '001',
						title: '吃饭',
						done: true
					},
					{
						id: '002',
						title: '抽烟',
						done: false
					},
					{
						id: '003',
						title: '喝酒',
						done: true
					},
					{
						id: '004',
						title: '烫头',
						done: true
					}
				]
			}
		},
		methods: {
			receives(x) {
				console.log('我是App', x)
				this.todos.unshift(x)
			},
			//勾选 or 取消勾选
			checkTodo(id) {
				console.log("我自信了",id);
				this.todos.forEach((todo) => {
					if (todo.id === id) todo.done = !todo.done
				})
			}
		} */
	};
</script>

<style lang="less" scope="this api replaced by slot-scope in 2.5.0+">
	/*base*/
	body {
		background: #fff;
	}

	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}

	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}

	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}

	.btn:focus {
		outline: none;
	}

	.todo-container {
		width: 600px;
		margin: 0 auto;
	}

	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>
